<template>
  <div class="main">
        <div class="hou right" style="display:none">
        <el-button style="width:100%" @click="sendNode">发布文章</el-button>
        <div class="statistics">
           <div>
              <p>普通用户</p>
              <p>(23)</p>
           </div>
           <div class="nodes">
              <p>文章总数</p>
              <p>(23)</p>
           </div>
         
        </div>
              <p style="padding:10px">热门分类 (10)</p>
       <ul class="classification">
          <li @click="initNodes(item.cbId);title=item.cbName" v-for="item in album" :key="item">
            {{item.cbName}}
          </li>
           </ul>
      </div>
      <!-- 总数 分类 -->
      <div class="left">
        <div class="show">
          <p>{{title}} ( {{nodes.length}} )</p>

        </div>
        <div style="margin-top:10px">
            <el-alert
              title="用心营造完美社区,人工审核,打击恶意不良帖子,次数多封号处理!"
              type="warning">
            </el-alert>
        </div>
            
        <div class="nodes">
          <Cmlist v-for="item in nodes" :key="item.inex" :nodes="item"></Cmlist>
        </div>
      </div>
      <!-- 右 -->
      <div class="right">
        <el-button style="width:100%" @click="sendNode" >发布文章</el-button>
        <div class="statistics">
           <div>
              <p>普通用户</p>
              <p>(23)</p>
           </div>
           <div class="nodes">
              <p>文章总数</p>
              <p>(23)</p>
           </div>
         
        </div>
       <ul class="classification">
              <p>热门分类 ({{album.length}})</p>
              <div style="height:1px;margin-top:5px;display:block;background:#DCDFE6"></div>

             <li @click="initNodes(item.cbId);title=item.cbName" v-for="item in album" :key="item">{{item.cbName}}</li>
           </ul>
      </div>
  </div>
</template>

<script>
import Cmlist from "@/components/cmlist/comlist.vue"
export default {
  components:{Cmlist},
  data(){
    return{
      title:null,
      album:[
        {
          cbId:null,
          cbName:null
        }
      ],
      nodes:[
        {
            cbName:null,
            cbMess:null,

        }
      ]
    }
  },
  methods:{
    sendNode(){
      this.$router.push("/editor")
    },
    initNodes(cbId=1){
      this.$http.get("/cbnode/node/"+cbId).then(va=>{
          this.nodes=va.data.data
      })
    },
    initAlbum(){
      this.$http.get("/cbalbum/album").then(va=>{
          this.album = va.data.data
      })
    }
  },
  created(){
    this.initAlbum()
    this.initNodes()
  }
}

</script>

<style scoped lang="less">
  .main{
        width: 70%;
        height: auto;
        background: #fff;
        margin: 30px auto;
        display: flex;
        justify-content: space-around;
        .left{
          width: 67%;
          height: auto;
          .show{
            width: 100%;
            height: 40px;
            border-left: 6px solid #ffcd35;
            background: #f1f2f3;
            padding-left: 10px;
            p{
              font-size: 15px;
              line-height: 40px;
              color: #34495e;
            }
          }
          .nodes{
            width: 100%;
            height: auto;
            margin-top: 20px;
            padding: 10px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          }
        }
        .right{
          width: 27%;
          height: auto;
          // background: yellow;
          .statistics{
            width: 100%;
            margin-top: 10px;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            height: 100px;
            background: #ffcd35;
            div{
              width: 50%;
              height: 100%;
              p{
                text-align: center;
                line-height: 30px;
              }
            }
          }
          .classification{
            width: 100%;
            height: auto;
            list-style: none;
            background: #fff;
            margin-top: 10px;
            border-radius: 10px;
           box-shadow:5px 6px 3px -7px rgba(0, 0, 0, 0.85);
           padding: 15px;
           li{
             padding: 7px;
             font-size: 15px;
           }
          }
        }
    }
    .classification li:hover{
      background: #eaeaea;
      font-weight: bolder;
    }
      @media  screen and (max-width: 1300px) {
          .main{
              width: 100% !important;
              display: block !important;
              .left{
                width: 100% !important;
              }
              .right{
                width: 100% !important  ;
              display: none;
}
              .hou{
                display: block !important;
                 .classification{
                   display: flex !important;
                   flex-wrap: wrap;
                   box-shadow: none;
                   margin-top: 0px;
                   padding:5px;
                  li{
                    width: auto;
                  }
                 }
              }
          }
      }
</style>